<template>
  <view class="appeal-item" :class="{ 'appeal-item--active': isActive }" @click="$emit('click')">
    <view class="appeal-header">
      <text class="order-number">订单号：{{ appeal.orderNumber }}</text>
      <text class="status" :class="statusClass">{{ appeal.statusText }}</text>
    </view>
    
    <view class="appeal-info">
      <view class="info-row">
        <text class="label">车牌号：</text>
        <text class="value">{{ appeal.plateNumber }}</text>
      </view>
      <view class="info-row">
        <text class="label">停车场：</text>
        <text class="value">{{ appeal.parkingLot }}</text>
      </view>
      <view class="info-row">
        <text class="label">申诉原因：</text>
        <text class="value">{{ appeal.appealReason }}</text>
      </view>
      <view class="info-row">
        <text class="label">申诉时间：</text>
        <text class="value">{{ appeal.createTime }}</text>
      </view>
    </view>
    
    <view class="appeal-content">
      <text class="content-text">{{ appeal.appealContent }}</text>
    </view>
    
    <template v-if="appeal.status === 'processed' || appeal.status === 'rejected'">
      <view class="process-info">
        <text class="process-time">处理时间：{{ appeal.processTime }}</text>
        <text class="process-result">{{ appeal.processResult }}</text>
      </view>
    </template>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

// 定义props
const props = defineProps({
  appeal: {
    type: Object,
    required: true
  }
})

// 定义事件
defineEmits(['click'])

// 激活状态
const isActive = ref(false)

// 计算状态样式类
const statusClass = computed(() => {
  const statusMap = {
    pending: 'status--pending',
    processing: 'status--processing',
    processed: 'status--processed',
    rejected: 'status--rejected'
  }
  return statusMap[props.appeal.status] || ''
})
</script>

<style lang="scss" scoped>
.appeal-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  &--active {
    background-color: #f8f8f8;
  }
}

.appeal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-number {
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
}

.status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  
  &--pending {
    color: #ff9900;
    background-color: #fff9e6;
  }
  
  &--processing {
    color: #2979ff;
    background-color: #e6f2ff;
  }
  
  &--processed {
    color: #19be6b;
    background-color: #e6fff0;
  }
  
  &--rejected {
    color: #fa3534;
    background-color: #ffe6e6;
  }
}

.appeal-info {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  font-size: 26rpx;
  color: #666666;
  width: 140rpx;
}

.value {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.appeal-content {
  background-color: #f8f8f8;
  padding: 16rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.content-text {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

.process-info {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.process-time {
  display: block;
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
}

.process-result {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.6;
}
</style>